<template>
  <div class="container">
    <template v-if="film == null">
      <xw-loading />
    </template>
    <template v-else>
      <!-- 顶层导航 -->
      <van-nav-bar :title="film.name" left-text="返回" left-arrow @click-left="onClickLeft" />
      <!-- 图片展示 -->
      <div class="poster">
        <van-swipe>
          <van-swipe-item v-for="(image, index) in film.photos" :key="index">
            <img v-lazy="image" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 电影描述 -->
      <div class="film-detail">
        <div class="col">
          <div class="film-name">
            <span class="name">{{ film.name }}</span
            ><span class="item">2D</span>
          </div>
          <div class="film-grade">
            <span class="grade"></span>
          </div>
        </div>
        <div class="film-category grey-text">喜剧 | 剧情</div>
        <div class="film-premiere-time grey-text">2022-09-09上映</div>
        <div class="film-nation-runtime grey-text">中国大陆 | 111分钟</div>
        <div class="test grey-text">{{ film.synopsis | cntLen(50) }}</div>
      </div>
      <!-- 演职人员 -->
      <div class="actors">
        <div>演职人员</div>
        <div>
          <div v-for="item in 6" :key="item">
            <img
              src="https://pic.maizuo.com/usr/movie/164dd1b5511460986861db8726a6c817.jpg?x-oss-process=image/quality,Q_70"
              alt=""
            />
          </div>
        </div>
      </div>
      <!-- 选座 -->
      <div class="goSchedule">选座购票</div>
    </template>
  </div>
</template>

<script>
import { getFilmInfoApi } from '@/api/filmApi'
export default {
  props: {
    id: {
      type: String,
      default: 0
    }
  },
  data() {
    return {
      film: null
    }
  },
  async mounted() {
    this.film = await getFilmInfoApi(this.id)
  },
  methods: {
    onClickLeft() {
      // 回退
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #ccc;
  .poster {
    width: 100vw;
    height: 210px;
    overflow: hidden;
    .van-swipe {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .film-detail {
    padding: 15px;
    padding-top: 12px;
    background-color: #fff;
    font-size: 13px;
    color: #797d82;
    .film-name {
      font-size: 18px;
      color: #191a1b;
    }
  }
  .actors {
    margin-top: 10px;
    background: #fff;
    > div:first-child {
      font-size: 16px;
      color: #191a1b;
      padding: 10px;
    }
    > div:last-child {
      display: flex;
      width: 100vw;
      overflow-x: auto;
      // 让滚动条隐藏起来
      &::-webkit-scrollbar {
        width: 0;
      }
      > div {
        // 弹性布局，项目属性
        // 在100%的宽度中，每一项所占用的比例
        flex: 0 0 20%;
        margin: 10px;
        /* width: 200px;
        height: 100px; */
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .goSchedule {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 49px;
    width: 100%;
    text-align: center;
    background-color: #ff5f16;
    color: #fff;
    font-size: 16px;
    line-height: 49px;
  }
}
</style>
